<template>
  <div style="width: 1400px">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><a href="/default">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">食品</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">休闲食品</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">饼干蛋糕</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">面包</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品名</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="7" style="width: 480px; margin-top: 30px">
        <el-carousel indicator-position="outside" height="450px">
          <el-carousel-item v-for="item in goodsImgs" :key="item.index">
            <img :src="item.url" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="14" style="width: 750px">
        <el-form ref="form" :model="this.form" label-width="50px">
          <h2>{{ form.spuname }}</h2>

          <div class="money">
            <el-form-item label="价格" prop="price">
              <span style="font-size: 30px; color: red">
                ￥{{ form.price }}
              </span>
              <span style="color: grey; text-decoration: line-through">
                ￥10.00
              </span>
            </el-form-item>
          </div>

          <el-form-item label="运费">
            <span> ￥5.00 </span>
          </el-form-item>
          <!-- <el-form-item
            label="规格"
            :model="this.value"
          > -->
          <span>规格</span>
          <div class="spuspecificationvalue">
            <!-- <div
              v-for="item of vaule"
              :key="item.id"
              class="spuspecificationvaluename"
            >
              <tr>
                <td>
                  <el-button
                    @click="clickcc(item)"
                    type="primary"
                    plain
                    :autofocus=autofocus
                    >{{ item.spuspecificationvaluename }}</el-button
                  >
                </td>
              </tr>
            </div> -->

            <el-checkbox-group
              v-model="checkList"
              v-for="item of vauless"
              :key="item.spuspecificationvaluenameId"
              class="spuspecificationvaluename"
            >
              <el-checkbox
              
                :label="item.spuspecificationvaluename"
                border
                @change="clickcc(item)"
                >{{ item.spuspecificationvaluename }}</el-checkbox
              >
            </el-checkbox-group>
          </div>

          <el-form-item label="数量">
            <el-input-number
              v-model="form.num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              size="small"
              style="width: 85px"
            ></el-input-number>
            件
          </el-form-item>
          <el-form-item>
            <el-button type="danger" plain class="el-icon-shopping-cart-1 buy"
              >加入购物车</el-button
            >
            <el-button type="danger" class="buy" @click="lijigoumai">立即购买</el-button>
            <p style="font-size: 10px">
              <span class="el-icon-user"> </span>
              <span style="color: red">77</span>
              人已购买
            </p>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="width: 150px" class="look">
        <div>
          <p class="title-text"><span>看了又看</span></p>
          <div v-for="item of threeSup[0]" :key=item.id>  
            <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              :src="'http://localhost:5000/files/'+item.imageId"
              class="image"
              style="height: 120px"
              
            />
            <div style="padding: 3px">
              <div class="bottom" style="text-align: center;">
                <el-button type="text" class="button"  
                  >{{item.spuname}}</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">${{item.price}}</span>
              </div>
            </div>
          </el-card>
          </div>
          
          
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="2" style="width: 230px; margin-top: 0px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="text" style="color: Gray"
              >水水食品旗舰店</el-button
            >
            <i class="el-icon-sunny" style="color: DeepPink"></i>
          </div>
          <div style="font-size: small">
            <div style="text-align: center; margin-left: 15px">
              <tr style="color: Gray">
                <td>描述</td>
                <td class="score">服务</td>
                <td class="score">物流</td>
              </tr>
              <tr style="color: red">
                <td>4.5</td>
                <td class="score">4.7</td>
                <td class="score">4.3</td>
              </tr>
            </div>
            <div style="margin-top: 10px">
              <tr style="font-size: 10px">
                <td>
                  <el-button type="info" size="small">进店逛逛</el-button>
                </td>
                <td>
                  <el-button
                    type="info"
                    plain
                    size="small"
                    style="margin-left: 10px"
                    >收藏店铺</el-button
                  >
                </td>
              </tr>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="20" style="width: 1000px" :model="form">
        <el-tabs type="border-card">
          <el-tab-pane label="商品介绍">
             <tr>
              <td class="introduce">品牌：{{ form.brand }}</td>
            </tr>
            <tr>
              <td class="introduce">商品名称：{{ form.spuname }}</td>
            </tr>
            <tr>
              <td class="introduce">简介：{{ form.intro }}</td>
            </tr>

            <hr />
            <div class="images" v-for="item of imageList" :key=item.id>
            <img
              :src="'http://localhost:5000/files/'+item.imageId"
              alt=""
              height="580px"
              width="780px"
            />
            </div>
          </el-tab-pane>
          <el-tab-pane label="规格与包装">
            <tr>
              <td class="introduce">保质期：</td>
            </tr>
            <tr>
              <td class="introduce">产品标准号：</td>
            </tr>
            <tr>
              <td class="introduce">生产许可证号：</td>
            </tr>
          </el-tab-pane>
        </el-tabs>
      </el-col>
  <el-col :span="2" style="width: 150px" class="look">
        <div>
          <p class="title-text"><span>猜你喜欢</span></p>
          <div v-for="item of daothreeSup[0]" :key=item.id>  
            <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              :src="'http://localhost:5000/files/'+item.imageId"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom" style="text-align: center;">
                <el-button type="text" class="button" 
                  >{{item.spuname}}</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">${{item.price}}</span>
              </div>
            </div>
          </el-card>
          </div>
          
          
        </div>
      </el-col>
      



    </el-row>
  </div>
</template>

<script>
import { getStoreList,List10,List11 } from "../api/store";
import { postorder } from "../api/home";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      imageid:"",
      form: {
        id: "",
        spuname: "",
        price:"",
        num:""
      },
      vauless:[],
      order: {
        Spuname: "",
        UserId: "",
        Price:"",
        Num: "",
        State: "",
        Parameter: "",
        ShopId: "",
        imageId:""
      },
      vaule: [],
      value: [],
      image: {},
      checkList: [1, 2],
      goodsImgs: [ ],
      autofocus: false,
      imageList:[],
      threeSup:[],
      daothreeSup:[],
       
     

    };
  },
  components: {},
  methods: {
    
    
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
    clickcc(item) {
      console.log(item.spuspecificationvaluename);
      console.log(item);
      console.log(item.spuspecificationvaluenameId);
      
      console.log(this.checked);
    },
   lijigoumai() {
      console.log(this.form);
      console.log(this.form.spuname);
      this.order.Spuname = this.form.spuname;
      this.order.UserId = parseInt(this.uId);
      this.order.Price = parseInt(this.form.price);
      this.order.Num = this.form.num;
      this.order.State = "未支付";
      this.order.Parameter = "Parameter"
      this.order.ShopId = 0;
           this.order.imageId=this.imageid
      
      console.log(this.order);

      postorder(this.order).then((data) => {
        console.log(data.data);
        this.$router.push("/checkOut?orderid="+data.data.id)
      });
    },
    
    
    
  },
  mounted() {
    getStoreList(this.id).then((data) => {
      let res = data.data;
      
      this.form = res.spu[0];
      this.imageid=this.form.imageId;
      console.log(this.form);
      console.log(res.spus.image);

      this.vauless = res.vaule;
      console.log(this.vauless);
      console.log(res.spus.image);

       
      res.spus.image.forEach(element => {
        console.log(element);
        console.log(element.imageId);
        this.imageList.push(element);
        var obj={
            url:'http://localhost:5000/files/'+element.imageId
        }
        this.goodsImgs.push(obj)
      });
      List10().then(data=>{
      console.log(data.data);
      this.threeSup.push(data.data)
      console.log(this.threeSup[0]);
    });
    List11().then(data=>{
      console.log(data.data);
      this.daothreeSup.push(data.data)
      console.log(this.daothreeSup[0]);
    });

      // this.vaule = res.vaule;
      // console.log(this.vaule);

      // res.vaule.forEach((item) => {
      //   arr.push(item.spuspecificationvalueId,item.spuspecificationvaluename);
      // });
      // console.log(arr);

      // res.vaule.forEach((item)=>{
      //   var arr = [];
      //   if(item.spuspecificationId == 1){
      //     arr.push(item.spuspecificationname)
      //   }else{
      //     arr.push()
      //   }
      // })
    });
  },

  created() {
    this.id = this.$route.query.id;
    
    console.log(this.id);
    
  },
  computed:{
    uId(){
      return Cookies.get("id")
    }
  }
};
</script>

<style scoped>
.introduce {
  text-align: left;
  width: 200px;
  padding-left: 50px;
  height: 25px;
  font-size: small;
  color: grey;
}

.flavor {
  margin-top: 5px;
}

.score {
  padding-left: 30px;
}
.specifications {
  margin-top: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.buy {
  width: 130px;
}

.money {
  background-color: #f5f5f5;
}

.el-breadcrumb {
  background-color: #f5f5f5;
  line-height: 30px;
}

.el-card {
  margin-top: 10px;
}

.look {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.button {
  font-size: 17px;
  color: #666666;
  height: 30px;
}

.title-text span {
  display: block;
  position: relative;

  text-align: center;
}
.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #dddddd;
  width: 25%;
  height: 1px;
}
.title-text span:before {
  left: 5%;
}
.title-text span:after {
  right: 5%;
}

.el-breadcrumb-item {
  font-size: 14px;
}

.el-col {
  border-radius: 4px;
  margin-top: 10px;
}

/* .el-header {
} */
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}
img {
  width: 100%;
  height: 100%;
}
.spuspecificationvalue {
  width: 500px;
  height: 200px;
}
.spuspecificationvaluename {
  margin-left: 5px;
  float: left;
}
</style>